<template>
  <div class="table-role">


    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="add(0,'')">
          添加资源
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>


      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'childs', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="resourceTypeName"
        label="资源类型"

        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="路径名称"

        width="180">
      </el-table-column>
      <el-table-column
      prop="mark"
      label="标志">
    </el-table-column>
      <el-table-column
        prop="icon"
        label="图标">
      </el-table-column>
      <el-table-column
        prop="sortIndex"
        label="权重">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            @click="handleAdd(scope.$index, scope.row)">添加</el-button>-->
<!--       -->
          <el-button
            size="mini"
            @click="add(scope.row.id, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-dialog
      title="添加资源信息"
      :visible.sync="dialogFormVisibles"
      width="500px"

    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文件路径">
          <el-input v-model="form.component"></el-input>
        </el-form-item>
        <el-form-item label="是否结束">
          <el-select v-model="value" placeholder="请选择"  class="select"  style="width:100%" >
            <el-option
              style="width:100%"
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="标识">
          <el-input v-model="form.mark"></el-input>
        </el-form-item>
        <el-form-item label="路由名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-input v-model="form.parentResource"></el-input>
        </el-form-item>
        <el-form-item label="定向跳转">
          <el-input v-model="form.redirect"></el-input>
        </el-form-item>
        <el-form-item label="资源类型">
          <el-input v-model.number="form.resourceType"></el-input>
        </el-form-item>
        <el-form-item label="path路径">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="权重">
          <el-input v-model.number="form.sortIndex"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="Savedo">确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
    import { search } from "@/api/shortages"
    import { add } from "@/api/shortages"
    import {Delete} from "../../../api/shortages";
    import {edit} from "../../../api/shortages";
    export default {
        name: "Shortages",
        data() {
            return {
                tableData: [],
                value:'',
                id:0,
                options: [{
                    value: false,
                    label: '否'
                },
                    {
                        value: true,
                        label: '是'
                    }
                ],
                form:{
                    component:"",
                    end:"",
                    icon:"",
                    mark:"",
                    name:"",
                    parentResource:"",
                    redirect:"",
                    resourceType:"",
                    url:"",
                    sortIndex: 0,
                },
                dialogFormVisibles:false
            }
        },
        created(){
          this.search()
        },
        methods: {
            add(id,row){
               this.id=id
              console.log(id)

               this.dialogFormVisibles=true
              if(id>0){

                this.value=row.end
                console.log(row)
                this.form={...row}
              }else {
                 this.form={

                 }
              }
            },
            search(){
                search().then(res =>{
                    console.log(res)
                    this.tableData=res.data


                })
            },
            Savedo(){
              if(this.id>0){
                  this.form.end=this.value
                edit(this.form).then(res =>{

                  if(res.code==200){
                    this.$baseMessage("修改成功");
                    this.search();
                  }else {
                    return false
                  }



                })
              }else {
                this.form.end=this.value
                add(this.form).then(res =>{
                  console.log(res)
                  this.$baseMessage("添加成功");
                  this.search();


                })
              }

            },
            close(){
                this.dialogFormVisibles=false
            },
            handleAdd(){

            },

            handleEdit(id,row){


            },
          handleDelete(index,row){
            let mark=row.mark
            this.$baseConfirm("你确定要删除当前项吗", null, async () => {
              Delete({mark}).then(res =>{

                console.log(res)
                if(res.code==200){
                  this.$message({
                    message: "删除成功",
                    type: 'success'
                  })
                  this.search()
                }


              })
            });

          },
        },


    }
</script>

<style scoped>

</style>
